<template>
	<view class="login-page" :style="{'height':`calc(100vh - ${barHeight}px)`,'background-image': `url(${Http_url}/static/images/login_bg.png)`}">
		<view class="logo-box acea-row row-center-wrapper">
			<view class="logo">
				<image :src="Http_url+'/static/images/logo.png'"></image>
			</view>
		</view>
		<view class="bottom paddingl20" style="margin-top: 200rpx;">
			<view class="btn-box">
				<button class="btn btn-bg white acea-row row-center-wrapper" @click="login">
					<text class="iconfont icon-weixin size32" style="margin-right: 20rpx;"></text>
					<text class="size18">会员登录</text>
				</button>
			</view>
			<div class="protocol acea-row row-top">
				<checkbox-group class="checkgroup acea-row" @change='isAgree = !isAgree'>
					<view>
						<checkbox class="checkbox" borderColor="#6F6F6F" backgroundColor="#ffffff" activeBackgroundColor="#E67804" activeBorderColor="#E67804" color="#ffffff" :checked="isAgree ? true : false" style="border-radius: 50%;transform:scale(0.7)" />
					</view>
				</checkbox-group>
				<view class="protocol_text size14">
					登录即代表同意<text @click="userAgree" class="font_pro">《隐私协议》</text>并授权使用您的账号信息（如昵称、 头像、地址等信息）以便您统一管理
				</view>
			</div>
		</view>
		<view class="upoup acea-row row-center-wrapper" v-if="isShow">
			<view class="upoup-bg"></view>
			<view class="upoup-mid padding20">
				<view class="top acea-row row-between-wrapper">
					<view class="title"></view>
					<view class="close acea-row row-right row-middle">
						<text class="iconfont icon-guanbi size22 blod600" @click="isShow = false"></text>
					</view>
				</view>
				<view class="main">
					<mp-html :content="htmlnodeStr" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "@/store";
	import {getProtocol} from "@/api/login.js"
	import { mapGetters } from "vuex";	
	import { wxappid, Http_url } from '@/config/config.js'	
	import { isWeixin } from "@/utils";
	import Cache from '@/utils/cache.js'
	import Auth from '@/libs/wechat.js'
	import { LOGIN_STATUS_USER, USER_INFOU, EXPIRES_TIMES, STATE_UR_KEY, BACK_URL} from '@/config/store.js';
	
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	// 判断是否是微信浏览器
	// const isWechat = () => {
	// 	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	// }
	export default {
		computed: mapGetters(['globalData']),
		data() {
			return {
				Http_url:Http_url,
				logo:'../../load/static/images/logo.png',
				wxappId:wxappid,
				barHeight:0,
				isAgree:true,
				isShow:false,
                htmlnodeStr: '',
				code:'',
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '掌信微直播'
			});
			this.barHeight=this.globalData.barHeight
			this.getProto()
			this.code = this.$util.handleUrlCode().code;
			if(this.code && this.code!=='' && this.code!==undefined){
				uni.setStorageSync('snsapiUserCode', this.code);
				// this.upLogin(this.code);
				this.handleAuthCode()
			}
		},
		methods:{
            // 获取协议
            getProto(){
            	getProtocol()
                .then(res => {
            		this.htmlnodeStr = res.data.contents
            	}).catch(err=>{
            		this.$utils.Tips({
            			title:err
            		})
            	})
            },
			userAgree(){
				this.isShow=true
			},
			login(){
				if(!this.isAgree) return this.$util.Tips({
					title:'请先阅读《隐私协议》，并勾选'
				})
				if(isWeixin()){
					this.handleAuthCode()
					// Auth.oAuth('snsapi_base', uni.getStorageSync('snRouter'));
				}else{
					return this.$util.Tips({
						title:'请用微信浏览器访问'
					})
				}
				
			},
			// 授权获取code
			handleAuthCode() {
				// let authCode = this.$util.handleUrlCode().code; // 截取页面code
				let authCode = this.code; // 截取页面code
				let appId = this.wxappId; // 微信公众号的AppId
				let scope = 'snsapi_userinfo' // snsapi_base静默授权 用户无感知
				// let redirectUri = encodeURIComponent(origin + '/pages/login/index');//回调地址
				// console.log('window.location.href',window.location.href)
				let redirectUri = encodeURIComponent(window.location.href);//回调地址
				let path = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId +
					'&redirect_uri=' + redirectUri  + '&response_type=code&scope=' + scope +
                    '&' + window.location.search.replace('?', '') +
					'&state=1#wechat_redirect';
				if (authCode == null || authCode == '' || authCode == undefined) {
					// console.log('path',path)
					window.location.href = path;
				} else {					
					this.upLogin(authCode);
				}
			},
			// 登录判断
			upLogin(code){
				let vid = uni.getStorageSync('vid')
				// console.log('vid',vid)
				uni.showLoading({
					title:'登录中...'
				})
				Auth.userAuth(code,this.globalData.qun_id).then(res=>{
					// console.log('userAuth',res)
					this.$store.commit('LOGINUSER', {
						token: res.token
					});
					this.$store.commit("SETUIDUSER", res.data.id);
					this.$store.commit('UPDATE_USERINFO_USER',res.data)
					uni.hideLoading()
					uni.navigateTo({
						animationType:this.$animationType.type,
						animationDuration:this.$animationType.duration,
						url:`/pages/index/index?id=${vid}`
					})
				}).catch(err=>{
					Cache.clear(LOGIN_STATUS_USER);
					Cache.clear(EXPIRES_TIMES);
					Cache.clear(USER_INFOU);
					Cache.clear(STATE_UR_KEY);
					uni.hideLoading()
					uni.navigateTo({
						url:'/pages/login/index'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-page{
		width: 100%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		.logo-box{
			height: 60%;
			.logo{
				width: 264rpx;
				height: 258rpx;
			}
		}
		.protocol {
			margin-top: 20rpx;
			.protocol_text {
				width: 90%;
				.font_pro {
					color: #518BFF;
				}
			}
			/deep/uni-checkbox .uni-checkbox-input{
				border-radius: 50% !important;
			}
			/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
				font-size: 36rpx !important;
			}
		}
		.upoup{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.upoup-bg{
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 1);
			}
			.upoup-mid{
				width: 90%;
				height: 90%;
				position: absolute;
				background-color: #ffffff;
				border-radius: 40rpx;
				z-index: 9999;
				.close{
					width: 100%;
					margin-bottom: 20rpx;
				}
				.main{
					height: calc(100% - 80rpx);
					overflow-y: auto;
				}
				.main::-webkit-scrollbar-track-piece {
					background-color: rgba(0, 0, 0, 0);
					border-left: 2rpx solid rgba(0, 0, 0, 0);
				}
			
				.main::-webkit-scrollbar {
					display: block;
					width: 10rpx;
					height: 20rpx;
					-webkit-margin-bottom-collapse: 24rpx;
					-webkit-border-radius: 16rpx;
					-moz-border-radius: 16rpx;
					border-radius: 10rpx;
				}
				.main::-webkit-scrollbar-track{
					background-color: #D8D8D8;
					border: #D8D8D8 2rpx solid;
				}
			   .main::-webkit-scrollbar-thumb {
				   background-color: #ffffff;
				   background-clip: padding-box;
				   -webkit-border-radius: 8rpx;
				   -moz-border-radius: 8rpx;
				   border-radius: 4rpx;
				   min-height: 56rpx;
			    }
		 
			  .main::-webkit-scrollbar-thumb:hover {
				  background-color: #ffffff;
				  -webkit-border-radius: 8rpx;
				  -moz-border-radius: 8rpx;
				  border-radius: 4rpx;
			    }
			}
		}
	}
</style>
